<template>
	<view class="container">
		<scroll-view class="groupon-list" scroll-y="true" :scroll-top="scrollTop">

			<view class="item" v-for="(item,index) in grouponList" :key="index">
				<view @tap="gotoGoods(item.goods.id)">
					<image class="img" :src="item.goods.picUrl" background-size="cover"></image>
					<view class="right">
						<view class="text">
							<view class="header">
								<text class="name jhx_f7">{{item.goods.name}}</text>
								<view class="capsule-tag">
									<zan-capsule color="#e67249" leftText="团购" :rightText="item.groupon_member" />
								</view>
							</view>
							<text class="desc jhx_f5">{{item.goods.brief}}</text>
							<view class="price">
								<view class="priceTg jhx_f8">￥{{item.groupon_price}}</view>
								<view class="counterPrice jhx_f9">￥{{item.goods.counterPrice}}</view>
								<view class="brokerage" v-if="isAgent && item.goods.brokeragePrice>0.01">赚￥{{item.goods.brokeragePrice}}</view>
								<view class="brokerage" v-else>立即参团</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="page" v-if="showPage">
				<view class="prev" :class="page <= 1 ? 'disabled' : ''" @tap="prevPage">上一页</view>
				<view class="next " :class="(count / size) < page ? 'disabled' : ''" @tap="nextPage">下一页</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import zanCapsule from '../../../components/zan-capsule/zan-capsule.vue'
	export default {
		data() {
			return {
				grouponList: [],
				page: 1,
				size: 10,
				count: 0,
				scrollTop: 0,
				isAgent: false,
				showPage: false
			}
		},
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		components: {
			zanCapsule,
		},
		onLoad: function(options) {
			this.getGrouponList();
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			// 页面渲染完成
			let that = this;
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let that = this;
			let userInfo = that.user;;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		methods: {
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../../goods/goods?id=' + goodsId
				})
			},
			getGrouponList: function() {

				let that = this;
				that.scrollTop = 0,
					that.showPage = false;
				that.grouponList = [];
				// 页面渲染完成
				uni.showToast({
					title: '加载中...',
					icon: 'loading',
					duration: 2000
				});

				that.$util.request(that.$api.api.GroupOnList, {
					page: that.page,
					size: that.size
				}).then(function(res) {
					if (res.errno === 0) {

						that.scrollTop = 0;
						that.grouponList = res.data.data;
						that.showPage = true;
						that.count = res.data.count;
					}
					uni.hideToast();
				});
			},
			nextPage: function(event) {
				var that = this;
				if (this.page > that.count / that.size) {
					return true;
				}
				that.page = that.page + 1;
				this.getGrouponList();

			},
			prevPage: function(event) {
				if (this.page <= 1) {
					return false;
				}
				var that = this;
				that.page = that.page - 1;
				this.getGrouponList();
			}
		}
	}
</script>

<style>
	page,
	.container {
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		background: #f4f4f4;
	}

	.groupon-list {
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		background: #f4f4f4;
	}

	.groupon-list .item {
		height: 244rpx;
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.groupon-list .img {
		margin-top: 12rpx;
		margin-right: 10rpx;
		float: left;
		width: 220rpx;
		height: 220rpx;
	}

	.groupon-list .right {
		float: left;
		height: 244rpx;
		width: 476rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.groupon-list .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 244rpx;
		width: 476rpx;
	}

	.groupon-list .name {
		float: left;
		width: 330rpx;
		display: block;
		line-height: 42rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.groupon-list .capsule-tag {
		float: right;
		padding-right: 0rpx;
		padding-top: 8rpx;
	}

	.groupon-list .zan-capsule+.zan-capsule {
		margin-left: 6px;
	}

	.groupon-list .desc {
		margin-top: 20rpx;
		width: 476rpx;
		display: block;
		line-height: 38rpx;
	}

	.groupon-list .price {
		width: 476rpx;
		display: flex;
		line-height: 50rpx;
	}

	.groupon-list .priceTg {
		width: 35%;
	}

	.groupon-list .counterPrice {
		margin-left: 30rpx;
		text-decoration: line-through;
		width: 30%;
	}

	.groupon-list .brokerage {
		float: left;
		padding-right: 20rpx;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 35%;
	}

	.page {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.page view {
		height: 108rpx;
		width: 50%;
		float: left;
		font-size: 29rpx;
		color: #333;
		text-align: center;
		line-height: 108rpx;
	}

	.page .prev {
		border-right: 1px solid #d9d9d9;
	}

	.page .disabled {
		color: #ccc;
	}
</style>
